<template>
  <div class="por">
    <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item>商城</a-breadcrumb-item>
        <a-breadcrumb-item><a href="javascipt:;" @click="$router.go(-1)">支付进件</a></a-breadcrumb-item>
        <a-breadcrumb-item>{{ isEdit ? '编辑' : '添加' }}进件</a-breadcrumb-item>
      </a-breadcrumb>
      <h4 class="subTitle">
        {{ id ? '编辑' : '添加' }}
      </h4>

      <a-tabs v-model="activeTab">
        <a-tab-pane key="1" tab="主体信息"></a-tab-pane>
        <a-tab-pane key="2" tab="经营信息"></a-tab-pane>
        <a-tab-pane key="3" tab="结算账户"></a-tab-pane>
        <a-tab-pane key="4" tab="超级管理员"></a-tab-pane>
      </a-tabs>
    </div>

    <a-card style="margin: 24px" :bordered="false">
      <a-form-model
        class="form"
        ref="ruleForm"
        :rules="rules"
        :model="form"
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 16 }"
      >
        <h4 class="title">主体类型</h4>

        <a-form-model-item label="主体类型" prop="subject_info.subject_type">
          <a-select :disabled="!status" v-model="form.subject_info.subject_type" placeholder="请选择主体信息">
            <a-select-option :value="item.id" v-for="item of subjectTypeList" :key="item.id">
              {{ item.title }}
            </a-select-option>
          </a-select>

          <p class="ts">{{ getSubjectTypeInfo }}</p>
        </a-form-model-item>

        <div class="formBox" v-show="activeTab === '1'">
          <h4 class="title">主体信息</h4>
          <p class="ts">请填写商家的营业执照/登记证书、经营者/法人的证件等信息</p>

          <!-- 登记证书信息 start -->
          <template
            v-if="
              form.subject_info.subject_type == 'SUBJECT_TYPE_INSTITUTIONS' ||
              form.subject_info.subject_type == 'SUBJECT_TYPE_OTHERS'
            "
          >
            <a-form-model-item label="登记证书照片" prop="subject_info.certificate_info.cert_copy">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => (form.subject_info.certificate_info.cert_copy = e.data)"
                @deleteImg="form.subject_info.certificate_info.cert_copy = ''"
                :imgSrc="form.subject_info.certificate_info.cert_copy"
              >
              </cyyUploadImg>
              <img
                @click="see(form.subject_info.certificate_info.cert_copy)"
                v-else
                class="seeImg"
                :src="form.subject_info.certificate_info.cert_copy"
                alt=""
              />

              <p class="ts">
                请上传彩色照片or彩色扫描件or加盖公章鲜章的复印件、可添加“微信支付”相关水印（如微信支付认证）
              </p>
            </a-form-model-item>

            <a-form-model-item label="登记证书类型" prop="subject_info.certificate_info.cert_type">
              <a-select
                :disabled="!status"
                v-model="form.subject_info.certificate_info.cert_type"
                placeholder="请选择登记证书类型"
              >
                <a-select-option :value="item.value" v-for="item of certTypeList" :key="item.value">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="证书号" prop="subject_info.certificate_info.cert_number">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.certificate_info.cert_number"
                placeholder="请输入证书号"
              />
            </a-form-model-item>

            <a-form-model-item label="商户名称" prop="subject_info.certificate_info.merchant_name">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.certificate_info.merchant_name"
                placeholder="请输入商户名称"
              />
            </a-form-model-item>

            <a-form-model-item label="注册地址" prop="subject_info.certificate_info.company_address">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.certificate_info.company_address"
                placeholder="请输入注册地址"
              />
            </a-form-model-item>

            <a-form-model-item label="法人姓名" prop="subject_info.certificate_info.legal_person">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.certificate_info.legal_person"
                placeholder="请输入法人姓名"
              />
              <p class="ts">请填写登记证书上的法定代表人姓名</p>
            </a-form-model-item>

            <a-form-model-item label="证件是否长期" prop="subject_info.certificate_info.is_long">
              <a-radio-group :disabled="!status" v-model="form.subject_info.certificate_info.is_long">
                <a-radio :value="0">短期</a-radio>
                <a-radio :value="1">长期</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item label="组织机构代码证有效期开始日期" prop="subject_info.certificate_info.period_begin">
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.certificate_info.period_begin"
              />
            </a-form-model-item>

            <a-form-model-item
              v-if="form.subject_info.certificate_info.is_long == 0"
              label="组织机构代码证有效期结束日期"
              prop="subject_info.certificate_info.period_end"
            >
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.certificate_info.period_end"
              />
            </a-form-model-item>
          </template>
          <!-- 登记证书信息 end -->

          <!-- 营业执照信息 start -->
          <template
            v-if="
              form.subject_info.subject_type == 'SUBJECT_TYPE_INDIVIDUAL' ||
              form.subject_info.subject_type == 'SUBJECT_TYPE_ENTERPRISE'
            "
          >
            <a-form-model-item label="营业执照照片" prop="subject_info.business_license_info.license_copy">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => onOk(e.data, 1)"
                @deleteImg="form.subject_info.business_license_info.license_copy = ''"
                :imgSrc="form.subject_info.business_license_info.license_copy"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.subject_info.business_license_info.license_copy)"
                class="seeImg"
                :src="form.subject_info.business_license_info.license_copy"
                alt=""
              />
            </a-form-model-item>

            <a-form-model-item label="注册号" prop="subject_info.business_license_info.license_number">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.business_license_info.license_number"
                placeholder="请输入注册号"
              />
            </a-form-model-item>

            <a-form-model-item label="商户名称" prop="subject_info.business_license_info.merchant_name">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.business_license_info.merchant_name"
                placeholder="请输入商户名称"
              />
            </a-form-model-item>

            <a-form-model-item label="经营者姓名" prop="subject_info.business_license_info.legal_person">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.business_license_info.legal_person"
                placeholder="请输入经营者姓名"
              />
              <p class="ts">若营业执照上商户名称为空或为“无”，请填写“个体户+经营者名字”，如“个体户张三”</p>
            </a-form-model-item>
          </template>
          <!-- 营业执照信息 end! -->

          <!-- 组织机构代码证start -->
          <template
            v-if="
              form.subject_info.subject_type == 'SUBJECT_TYPE_ENTERPRISE' ||
              form.subject_info.subject_type == 'SUBJECT_TYPE_INSTITUTIONS' ||
              form.subject_info.subject_type == 'SUBJECT_TYPE_OTHERS'
            "
          >
            <a-form-model-item label="营业执照是否三证合一" prop="subject_info.organization_info.is_composite">
              <a-radio-group :disabled="!status" v-model="form.subject_info.organization_info.is_composite">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <template v-if="form.subject_info.organization_info.is_composite == 0">
              <a-form-model-item label="组织机构代码证照片" prop="subject_info.organization_info.organization_copy">
                <cyyUploadImg
                  v-if="status"
                  @uploadSuccess="(e) => (form.subject_info.organization_info.organization_copy = e.data)"
                  @deleteImg="form.subject_info.organization_info.organization_copy = ''"
                  :imgSrc="form.subject_info.organization_info.organization_copy"
                >
                </cyyUploadImg>
                <img
                  v-else
                  @click="see(form.subject_info.organization_info.organization_copy)"
                  class="seeImg"
                  :src="form.subject_info.organization_info.organization_copy"
                  alt=""
                />
              </a-form-model-item>

              <a-form-model-item label="组织机构代码" prop="subject_info.organization_info.organization_code">
                <a-input
                  :disabled="!status"
                  v-model="form.subject_info.organization_info.organization_code"
                  placeholder="请输入组织机构代码"
                />
              </a-form-model-item>

              <a-form-model-item label="证件是否长期" prop="subject_info.organization_info.is_long">
                <a-radio-group :disabled="!status" v-model="form.subject_info.organization_info.is_long">
                  <a-radio :value="0">短期</a-radio>
                  <a-radio :value="1">长期</a-radio>
                </a-radio-group>
              </a-form-model-item>

              <a-form-model-item label="开始日期" prop="subject_info.organization_info.org_period_begin">
                <a-date-picker
                  :disabled="!status"
                  format="YYYY-MM-DD"
                  v-model="form.subject_info.organization_info.org_period_begin"
                />
              </a-form-model-item>

              <a-form-model-item
                v-if="form.subject_info.organization_info.is_long == 0"
                label="结束日期"
                prop="subject_info.organization_info.org_period_end"
              >
                <a-date-picker
                  :disabled="!status"
                  format="YYYY-MM-DD"
                  v-model="form.subject_info.organization_info.org_period_end"
                />
              </a-form-model-item>
            </template>
          </template>
          <!-- 组织机构代码证end -->

          <a-form-model-item label="证件类型" prop="subject_info.identity_info.id_doc_type">
            <a-select
              :disabled="!status"
              v-model="form.subject_info.identity_info.id_doc_type"
              placeholder="请选择证件类型"
            >
              <a-select-option :value="item.value" v-for="item of idDocList" :key="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <template v-if="form.subject_info.identity_info.id_doc_type == 'IDENTIFICATION_TYPE_IDCARD'">
            <a-form-model-item label="身份证人像面照片" prop="subject_info.identity_info.id_card_info.id_card_copy">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => onOk(e.data, 2, 'face')"
                @deleteImg="form.subject_info.identity_info.id_card_info.id_card_copy = ''"
                :imgSrc="form.subject_info.identity_info.id_card_info.id_card_copy"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.subject_info.identity_info.id_card_info.id_card_copy)"
                class="seeImg"
                :src="form.subject_info.identity_info.id_card_info.id_card_copy"
                alt=""
              />

              <p class="ts">
                请上传彩色照片or彩色扫描件or加盖公章鲜章的复印件、可添加“微信支付”相关水印（如微信支付认证）
              </p>
            </a-form-model-item>

            <a-form-model-item label="身份证国徽面照片" prop="subject_info.identity_info.id_card_info.id_card_national">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => onOk(e.data, 2, 'back')"
                @deleteImg="form.subject_info.identity_info.id_card_info.id_card_national = ''"
                :imgSrc="form.subject_info.identity_info.id_card_info.id_card_national"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.subject_info.identity_info.id_card_info.id_card_national)"
                class="seeImg"
                :src="form.subject_info.identity_info.id_card_info.id_card_national"
                alt=""
              />

              <p class="ts">
                请上传彩色照片or彩色扫描件or加盖公章鲜章的复印件、可添加“微信支付”相关水印（如微信支付认证）
              </p>
            </a-form-model-item>

            <a-form-model-item label="身份证姓名" prop="subject_info.identity_info.id_card_info.id_card_name">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.identity_info.id_card_info.id_card_name"
                placeholder="请输入身份证姓名"
              />
            </a-form-model-item>

            <a-form-model-item label="身份证号码" prop="subject_info.identity_info.id_card_info.id_card_number">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.identity_info.id_card_info.id_card_number"
                placeholder="请输入身份证号码"
              />
            </a-form-model-item>

            <a-form-model-item label="身份证住址" prop="subject_info.identity_info.id_card_info.id_card_address">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.identity_info.id_card_info.id_card_address"
                placeholder="请输入身份证住址"
              />
            </a-form-model-item>

            <a-form-model-item label="证件是否长期" prop="subject_info.identity_info.is_long">
              <a-radio-group :disabled="!status" v-model="form.subject_info.identity_info.is_long">
                <a-radio :value="0">短期</a-radio>
                <a-radio :value="1">长期</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item
              label="身份证有效期开始日期"
              prop="subject_info.identity_info.id_card_info.card_period_begin"
            >
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.identity_info.id_card_info.card_period_begin"
              />
            </a-form-model-item>

            <a-form-model-item
              v-if="form.subject_info.identity_info.is_long == 0"
              label="身份证有效期结束日期"
              prop="subject_info.identity_info.id_card_info.card_period_end"
            >
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.identity_info.id_card_info.card_period_end"
              />
            </a-form-model-item>
          </template>
          <template
            v-if="
              form.subject_info.identity_info.id_doc_type == 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT' ||
              form.subject_info.identity_info.id_doc_type == 'IDENTIFICATION_TYPE_HONGKONG_PASSPORT' ||
              form.subject_info.identity_info.id_doc_type == 'IDENTIFICATION_TYPE_MACAO_PASSPORT' ||
              form.subject_info.identity_info.id_doc_type == 'IDENTIFICATION_TYPE_TAIWAN_PASSPORT'
            "
          >
            <a-form-model-item label="证件照片" prop="subject_info.identity_info.id_doc_info.id_doc_copy">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => (form.subject_info.identity_info.id_doc_info.id_doc_copy = e.data)"
                @deleteImg="form.subject_info.identity_info.id_doc_info.id_doc_copy = ''"
                :imgSrc="form.subject_info.identity_info.id_doc_info.id_doc_copy"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.subject_info.identity_info.id_doc_info.id_doc_copy)"
                class="seeImg"
                :src="form.subject_info.identity_info.id_doc_info.id_doc_copy"
                alt=""
              />
            </a-form-model-item>

            <a-form-model-item label="证件姓名" prop="subject_info.identity_info.id_doc_name">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.identity_info.id_doc_name"
                placeholder="请输入证件姓名"
              />
            </a-form-model-item>

            <a-form-model-item label="证件号码" prop="subject_info.identity_info.id_doc_info.id_doc_number">
              <a-input
                :disabled="!status"
                v-model="form.subject_info.identity_info.id_doc_info.id_doc_number"
                placeholder="请输入证件号码"
              />
            </a-form-model-item>

            <a-form-model-item label="证件是否长期" prop="subject_info.identity_info.is_long">
              <a-radio-group :disabled="!status" v-model="form.subject_info.identity_info.is_long">
                <a-radio :value="0">短期</a-radio>
                <a-radio :value="1">长期</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item
              label="身份证有效期开始日期"
              prop="subject_info.identity_info.id_doc_info.doc_period_begin"
            >
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.identity_info.id_doc_info.doc_period_begin"
              />
            </a-form-model-item>

            <a-form-model-item
              v-if="form.subject_info.identity_info.is_long == 0"
              label="身份证有效期结束日期"
              prop="subject_info.identity_info.id_doc_info.doc_period_end"
            >
              <a-date-picker
                :disabled="!status"
                format="YYYY-MM-DD"
                v-model="form.subject_info.identity_info.id_doc_info.doc_period_end"
              />
            </a-form-model-item>
          </template>
          <a-form-model-item label="营业执照是否长期" prop="subject_info.business_license_info.is_long">
            <a-radio-group
              :disabled="!status"
              v-model="form.subject_info.business_license_info.is_long"
              @change="changeTimeYingye"
            >
              <a-radio :value="0">短期</a-radio>
              <a-radio :value="1">长期</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            label="营业执照有效时间"
            prop="subject_info.business_license_info.period_begin"
            v-if="
              form.subject_info.subject_type === 'SUBJECT_TYPE_INDIVIDUAL' ||
              form.subject_info.subject_type === 'SUBJECT_TYPE_ENTERPRISE'
            "
          >
            <a-range-picker
              :disabled="!status"
              allowClear
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              v-model="queryTime"
              @change="changeTime"
            />
            <p class="ts">长期结束时间请填写2999-12-31</p>
          </a-form-model-item>
        </div>

        <div class="formBox" v-show="activeTab === '2'">
          <h4 class="title">经营信息</h4>
          <p class="ts">请填写商家的经营业务信息、售卖商品提供服务场景信息</p>

          <a-form-model-item label="商户简称" prop="business_info.merchant_shortname">
            <a-input :disabled="!status" v-model="form.business_info.merchant_shortname" placeholder="请输入商户简称" />
            <div class="ts">
              1、在支付完成页向买家展示、需与微信经营类目相关。<br />
              1、简称要求：<br />
              支持单纯以人名来命名，若为个体户经营、可用“个体户+经营者名称”或“经营者名称+业务”命名，如“个体户张三“或”张三餐饮店“<br />
              不支持无实际意义的文案，如“xx特约商户”、“800”、“xx客服电话xx”
            </div>
          </a-form-model-item>

          <a-form-model-item label="客服电话" prop="business_info.service_phone">
            <a-input :disabled="!status" v-model="form.business_info.service_phone" placeholder="请输入客服电话" />
          </a-form-model-item>
        </div>

        <div class="formBox" v-show="activeTab === '3'">
          <h4 class="title">结算账户</h4>
          <p class="ts">请填写商家提现收款的银行账户信息</p>

          <a-form-model-item label="账户类型" prop="bank_account_info.bank_account_type">
            <a-select
              :disabled="!status"
              v-model="form.bank_account_info.bank_account_type"
              placeholder="请选择账户类型"
            >
              <a-select-option :value="item.value" v-for="item of bankTypeList" :key="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="开户名称" prop="bank_account_info.account_name">
            <a-input :disabled="!status" v-model="form.bank_account_info.account_name" placeholder="请输入开户名称" />
            <div class="ts">
              1、选择“经营者个人银行卡”时，开户名称必须与“经营者证件姓名”一致。<br />
              2、选择“对公银行账户”时，开户名称必须与营业执照/登记证书的“商户名称”一致。
            </div>
          </a-form-model-item>

          <a-form-model-item label="开户银行" prop="bank_account_info.account_bank">
            <a-select :disabled="!status" v-model="form.bank_account_info.account_bank" placeholder="请选择开户银行">
              <a-select-option :value="item" v-for="item of bankList" :key="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item
            label="开户银行全称（含支行）"
            prop="bank_account_info.bank_name"
            v-if="form.bank_account_info.account_bank == '其他银行'"
          >
            <a-input
              :disabled="!status"
              v-model="form.bank_account_info.bank_name"
              placeholder="请输入开户银行全称（含支行）"
            />
          </a-form-model-item>

          <a-form-model-item label="开户银行省市" prop="bank_account_info.code_list">
            <a-cascader
              :disabled="!status"
              :field-names="{ label: 'name', value: 'adcode', children: 'children' }"
              v-model="form.bank_account_info.code_list"
              :options="addressList"
              placeholder="请选择开户银行所在地区"
              @change="onChange"
            />
          </a-form-model-item>

          <a-form-model-item label="银行账号" prop="bank_account_info.account_number">
            <a-input :disabled="!status" v-model="form.bank_account_info.account_number" placeholder="请输入银行账号" />
          </a-form-model-item>


          <div v-if="id">
          <h4 class="title">结算规则</h4>
          <p class="ts">请填写商家的结算费率规则、特殊资质等信息，行业参考文档：https://kf.qq.com/faq/220228IJb2UV220228uEjU3Q.html</p>

          <a-form-model-item label="行业名称" prop="settlement_info.qualification_type">
            <a-input :disabled="!status" v-model="form.settlement_info.qualification_type" placeholder="请输入行业名称" />
          </a-form-model-item>

          <a-form-model-item label="行业特殊资质图片" prop="settlement_info.qualifications">
            
            <cyyUploadImg
              @uploadSuccess="selectPic"
              @deleteImg="delPic"
              :imgList.sync="form.settlement_info.qualifications"
              dataType="list"
              :showSize="false"
            >
            </cyyUploadImg>

            <p class="ts">
              请上传彩色照片or彩色扫描件or加盖公章鲜章的复印件、可添加“微信支付”相关水印（如微信支付认证）
            </p>
          </a-form-model-item>

          <a-form-model-item label="优惠费率活动ID" prop="settlement_info.activities_id">
            <a-input :disabled="!status" v-model="form.settlement_info.activities_id" placeholder="请输入优惠费率活动ID" />
            <div class="ts">
              参考文档：https://pay.weixin.qq.com/wiki/doc/apiv3_partner/terms_definition/chapter1_1_3.shtml#part-10
            </div>
          </a-form-model-item>
          </div>
        </div>

        <div class="formBox" v-show="activeTab === '4'">
          <h4 class="title">超级管理员</h4>
          <p class="ts">
            请填写商家的超级管理员信息，超级管理员需在开户后进行签约，并接受日常重要信息和进行资金操作，请确定其为商户法定代表人或负责人
          </p>

          <a-form-model-item label="超级管理员类型" prop="contact_info.contact_type">
            <a-select :disabled="!status" v-model="form.contact_info.contact_type" placeholder="请选择">
              <a-select-option value="LEGAL"> 经营者/法人 </a-select-option>
              <a-select-option value="SUPER"> 经办人 </a-select-option>
            </a-select>
          </a-form-model-item>

          <template v-if="form.contact_info.contact_type === 'SUPER'">
            <a-form-model-item label="业务办理授权函" prop="contact_info.business_authorization_letter">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => (form.contact_info.business_authorization_letter = e.data)"
                @deleteImg="form.contact_info.business_authorization_letter = ''"
                :imgSrc="form.contact_info.business_authorization_letter"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.contact_info.business_authorization_letter)"
                class="seeImg"
                :src="form.contact_info.business_authorization_letter"
                alt=""
              />
            </a-form-model-item>

            <a-form-model-item label="超级管理员证件类型" prop="contact_info.contact_id_doc_type">
              <a-select :disabled="!status" v-model="form.contact_info.contact_id_doc_type" placeholder="请选择">
                <a-select-option value="IDENTIFICATION_TYPE_IDCARD"> 中国大陆居民-身份证 </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_OVERSEA_PASSPORT">
                  其他国家或地区居民-护照
                </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_HONGKONG_PASSPORT">
                  中国香港居民-来往内地通行证
                </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_MACAO_PASSPORT">
                  中国澳门居民-来往内地通行证
                </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_TAIWAN_PASSPORT">
                  中国台湾居民-来往大陆通行证
                </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_FOREIGN_RESIDENT"> 外国人居留证 </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_HONGKONG_MACAO_RESIDENT"> 港澳居民证 </a-select-option>
                <a-select-option value="IDENTIFICATION_TYPE_TAIWAN_RESIDENT"> 台湾居民证 </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="超级管理员证件正面照片" prop="contact_info.contact_id_doc_copy">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => (form.contact_info.contact_id_doc_copy = e.data)"
                @deleteImg="form.contact_info.contact_id_doc_copy = ''"
                :imgSrc="form.contact_info.contact_id_doc_copy"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.contact_info.contact_id_doc_copy)"
                class="seeImg"
                :src="form.contact_info.contact_id_doc_copy"
                alt=""
              />
            </a-form-model-item>

            <a-form-model-item label="超级管理员证件反面照片" prop="contact_info.contact_id_doc_copy_back">
              <cyyUploadImg
                v-if="status"
                @uploadSuccess="(e) => (form.contact_info.contact_id_doc_copy_back = e.data)"
                @deleteImg="form.contact_info.contact_id_doc_copy_back = ''"
                :imgSrc="form.contact_info.contact_id_doc_copy_back"
              >
              </cyyUploadImg>
              <img
                v-else
                @click="see(form.contact_info.contact_id_doc_copy_back)"
                class="seeImg"
                :src="form.contact_info.contact_id_doc_copy_back"
                alt=""
              />
            </a-form-model-item>

            <a-form-model-item label="超级管理员证件有效期开始时间" prop="contact_info.contact_period_begin">
              <a-date-picker
                :disabled="!status"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                v-model="form.contact_info.contact_period_begin"
              />
            </a-form-model-item>
            <a-form-model-item label="超级管理员证件有效期结束时间" prop="contact_info.contact_period_end">
              <a-date-picker
                :disabled="!status"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                v-model="form.contact_info.contact_period_end"
              />
            </a-form-model-item>
          </template>

          <a-form-model-item label="超管姓名" prop="contact_info.contact_name">
            <a-input :disabled="!status" v-model="form.contact_info.contact_name" placeholder="请输入超管姓名" />
          </a-form-model-item>

          <a-form-model-item label="超管证件号码" prop="contact_info.contact_id_number">
            <a-input v-model="form.contact_info.contact_id_number" placeholder="请输入超管证件号码" />
            <p class="ts">请填写超级管理员的证件号码，可传身份证，来往内地通行证，来往大陆通行证，护照等证件号码</p>
          </a-form-model-item>

          <a-form-model-item label="手机号码" prop="contact_info.mobile_phone">
            <a-input :disabled="!status" v-model="form.contact_info.mobile_phone" placeholder="请输入手机号码" />
            <p class="ts">用于接收微信支付的重要管理信息及日常验证码，超管签约时自助修改手机号，并进行短信验证</p>
          </a-form-model-item>

          <a-form-model-item label="联系邮箱" prop="contact_info.contact_email">
            <a-input :disabled="!status" v-model="form.contact_info.contact_email" placeholder="请输入联系邮箱" />
            <p class="ts">用于接收微信支付的开户邮件及日常业务通知</p>
          </a-form-model-item>
        </div>

        <div class="pofBtn">
          <a-button v-if="status" style="margin-right: 10px" @click="resetForm"> 重置 </a-button>
          <a-button style="margin-right: 10px" @click="$router.go(-1)"> 返回 </a-button>
          <a-button type="primary" v-if="activeTab !== '4'" @click="next"> 下一步 </a-button>
          <a-button v-if="status && activeTab === '4'" type="primary" @click="onSubmit" :disabled="btnDisabled">
            提交
          </a-button>
        </div>
      </a-form-model>
    </a-card>

    <ModalImg :previewImage="previewImage" ref="ModalImg"></ModalImg>
  </div>
</template>

<script>
import { setMerchantInfo, getMerchantInfo, getCountry } from '@/api/setting/merchant'
import { ocr } from '@/api/setting/applet'
import { cyyUploadImg } from '@/components/CyyUi/index'

export default {
  components: {
    cyyUploadImg,
    ModalImg: () => import('@/components/tools/ModalImg'),
  },

  data() {
    return {
      status: 1, // 0.不可编辑 1.可编辑
      previewImage: '',
      btnDisabled: false,
      list: [],
      id: undefined,
      activeTab: '1',
      addressList: [],
      // 银行列表
      bankList: [
        '工商银行',
        '交通银行',
        '招商银行',
        '民生银行',
        '中信银行',
        '浦发银行',
        '兴业银行',
        '光大银行',
        '广发银行',
        '平安银行',
        '北京银行',
        '华夏银行',
        '农业银行',
        '建设银行',
        '邮政储蓄银行',
        '中国银行',
        '宁波银行',
        '其他银行',
      ],
      // 账户类型列表
      bankTypeList: [
        {
          name: '对公银行账户',
          value: 'BANK_ACCOUNT_TYPE_CORPORATE',
        },
        {
          name: '经营者个人银行卡',
          value: 'BANK_ACCOUNT_TYPE_PERSONAL',
        },
      ],
      // 登记证书类型
      certTypeList: [
        {
          name: '事业单位法人证书',
          value: 'CERTIFICATE_TYPE_2388',
        },
        {
          name: '统一社会信用代码证书',
          value: 'CERTIFICATE_TYPE_2389',
        },
        {
          name: '有偿服务许可证（军队医院适用）',
          value: 'CERTIFICATE_TYPE_2390',
        },
        {
          name: '医疗机构执业许可证（军队医院适用）',
          value: 'CERTIFICATE_TYPE_2391',
        },
        {
          name: '企业营业执照（挂靠企业的党组织适用）',
          value: 'CERTIFICATE_TYPE_2392',
        },
        {
          name: '组织机构代码证（政府机关适用）',
          value: 'CERTIFICATE_TYPE_2393',
        },
        {
          name: '社会团体法人登记证书',
          value: 'CERTIFICATE_TYPE_2394',
        },
        {
          name: '民办非企业单位登记证书',
          value: 'CERTIFICATE_TYPE_2395',
        },
        {
          name: '基金会法人登记证书',
          value: 'CERTIFICATE_TYPE_2396',
        },
        {
          name: '慈善组织公开募捐资格证书',
          value: 'CERTIFICATE_TYPE_2397',
        },
        {
          name: '农民专业合作社法人营业执照',
          value: 'CERTIFICATE_TYPE_2398',
        },
        {
          name: '宗教活动场所登记证',
          value: 'CERTIFICATE_TYPE_2399',
        },
        {
          name: '其他证书/批文/证明',
          value: 'CERTIFICATE_TYPE_2400',
        },
      ],
      subjectTypeList: [
        {
          id: 'SUBJECT_TYPE_INDIVIDUAL',
          title: '个体户',
          des: '营业执照上的主体类型一般为个体户、个体工商户、个体经营',
        },
        {
          id: 'SUBJECT_TYPE_ENTERPRISE',
          title: '企业',
          des: '营业执照上的主体类型一般为有限公司、有限责任公司',
        },
        {
          id: 'SUBJECT_TYPE_INSTITUTIONS',
          title: '政府机关',
          des: '包括各级、各类政府机关，如机关党委、税务、民政、人社、工商、商务、市监等',
        },
        {
          id: 'SUBJECT_TYPE_OTHERS',
          title: '其他组织',
          des: '不属于企业、政府/事业单位的组织机构，如：社会团队、民办非企业、基金会。需求机构已办理组织机构代码证',
        },
      ],
      // 经营者/法人身份证件类型
      idDocList: [
        {
          name: '中国大陆居民-身份证',
          value: 'IDENTIFICATION_TYPE_IDCARD',
        },
        {
          name: '其他国家或地区居民-护照',
          value: 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT',
        },
        {
          name: '中国香港居民-来往内地通行证',
          value: 'IDENTIFICATION_TYPE_HONGKONG_PASSPORT',
        },
        {
          name: '中国澳门居民-来往内地通行证',
          value: 'IDENTIFICATION_TYPE_MACAO_PASSPORT',
        },
        {
          name: '中国台湾居民-来往大陆通行证',
          value: 'IDENTIFICATION_TYPE_TAIWAN_PASSPORT',
        },
      ],
      rules: {
        'subject_info.subject_type': [{ required: true, message: '请选择主体类型', trigger: 'change' }],
        'subject_info.business_license_info.license_copy': [
          { required: true, message: '请上传营业执照照片', trigger: 'blur' },
        ],
        'subject_info.business_license_info.license_number': [
          { required: true, message: '注册号不能为空', trigger: 'blur' },
        ],
        'subject_info.business_license_info.merchant_name': [
          { required: true, message: '商户名称不能为空', trigger: 'blur' },
        ],
        'subject_info.business_license_info.legal_person': [
          { required: true, message: '经营者姓名不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_doc_type': [{ required: true, message: '证件类型不能为空', trigger: 'change' }],

        // 登记证书信息
        'subject_info.certificate_info.cert_copy': [{ required: true, message: '请上传营业执照照片', trigger: 'blur' }],
        'subject_info.certificate_info.cert_type': [{ required: true, message: '请选择账户类型', trigger: 'change' }],
        'subject_info.certificate_info.cert_number': [{ required: true, message: '证书号不能为空', trigger: 'blur' }],
        'subject_info.certificate_info.merchant_name': [
          { required: true, message: '商户名称不能为空', trigger: 'blur' },
        ],
        'subject_info.certificate_info.company_address': [
          { required: true, message: '注册地址不能为空', trigger: 'blur' },
        ],
        'subject_info.certificate_info.legal_person': [
          { required: true, message: '法人姓名不能为空', trigger: 'blur' },
        ],
        'subject_info.certificate_info.is_long': [{ required: true, message: '请选择', trigger: 'change' }],
        'subject_info.certificate_info.period_begin': [
          { required: true, message: '组织机构代码证有效期开始日期不能为空', trigger: 'change' },
        ],
        'subject_info.certificate_info.period_end': [
          { required: true, message: '组织机构代码证有效期结束日期不能为空', trigger: 'change' },
        ],

        // 主体信息证件类型身份证---
        'subject_info.identity_info.id_card_info.id_card_copy': [
          { required: true, message: '身份证人像面照片不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_card_info.id_card_national': [
          { required: true, message: '身份证国徽面照片不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_card_info.id_card_name': [
          { required: true, message: '身份证姓名不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_card_info.id_card_number': [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_card_info.id_card_address': [
          { required: true, message: '身份证住址不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.is_long': [{ required: true, message: '请选择证件时间类型', trigger: 'change' }],
        'subject_info.identity_info.id_card_info.card_period_begin': [
          { required: true, message: '身份证有效期开始日期不能为空', trigger: 'change' },
        ],
        'subject_info.identity_info.id_card_info.card_period_end': [
          { required: true, message: '身份证有效期结束日期不能为空', trigger: 'change' },
        ],

        // 主体信息证件类型其他---
        'subject_info.identity_info.id_doc_info.id_doc_copy': [
          { required: true, message: '证件照片不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_doc_name': [{ required: true, message: '证件姓名不能为空', trigger: 'blur' }],
        'subject_info.identity_info.id_doc_info.id_doc_number': [
          { required: true, message: '证件号码不能为空', trigger: 'blur' },
        ],
        'subject_info.identity_info.id_doc_info.doc_period_begin': [
          { required: true, message: '身份证有效期开始日期不能为空', trigger: 'change' },
        ],
        'subject_info.identity_info.id_doc_info.doc_period_end': [
          { required: true, message: '身份证有效期结束日期不能为空', trigger: 'change' },
        ],

        // 企业主体信息-营业执照不是三证合一
        'subject_info.organization_info.is_composite': [{ required: true, message: '请选择', trigger: 'change' }],
        'subject_info.organization_info.organization_copy': [
          { required: true, message: '请上传组织机构代码证照片', trigger: 'blur' },
        ],
        'subject_info.organization_info.organization_code': [
          { required: true, message: '组织机构代码不能为空', trigger: 'blur' },
        ],
        'subject_info.organization_info.is_long': [{ required: true, message: '请选择', trigger: 'change' }],
        'subject_info.organization_info.org_period_begin': [
          { required: true, message: '开始日期不能为空', trigger: 'change' },
        ],
        'subject_info.organization_info.org_period_end': [
          { required: true, message: '结束日期不能为空', trigger: 'change' },
        ],
        'subject_info.business_license_info.period_begin': [
          {
            required: true,
            message: '营业执照有效时间不能为空',
            validator: (rule, value, callback) => {
              if (!this.queryTime.length) {
                return callback(new Error('Age must be greater than 18'))
              }

              callback()
            },
          },
        ],

        // 经营信息
        'business_info.merchant_shortname': [{ required: true, message: '商户简称不能为空', trigger: 'blur' }],
        'business_info.service_phone': [{ required: true, message: '客服电话不能为空', trigger: 'blur' }],

        // 结算账户
        'bank_account_info.bank_account_type': [{ required: true, message: '请选择账户类型', trigger: 'change' }],
        'bank_account_info.account_name': [{ required: true, message: '开户名称不能为空', trigger: 'blur' }],
        'bank_account_info.account_bank': [{ required: true, message: '请选择开户银行', trigger: 'change' }],
        'bank_account_info.bank_name': [{ required: true, message: '请输入开户银行全称（含支行）', trigger: 'change' }],
        'bank_account_info.code_list': [{ required: true, message: '请选择开户银行省市', trigger: 'change' }],
        'bank_account_info.account_number': [{ required: true, message: '银行账号不能为空', trigger: 'blur' }],

        // 超级管理员
        'contact_info.contact_name': [{ required: true, message: '超管姓名不能为空', trigger: 'blur' }],
        'contact_info.contact_id_number': [{ required: true, message: '超管证件号码不能为空', trigger: 'blur' }],
        'contact_info.mobile_phone': [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
        'contact_info.contact_email': [{ required: true, message: '联系邮箱不能为空', trigger: 'blur' }],
        'contact_info.contact_type': [{ required: true, message: '超级管理员类型不能为空', trigger: 'change' }],
        'contact_info.business_authorization_letter': [
          { required: true, message: '请上传业务办理授权函', trigger: 'change' },
        ],
        'contact_info.contact_id_doc_type': [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        'contact_info.contact_id_doc_copy': [
          { required: true, message: '请上传超级管理员证件正面照片', trigger: 'change' },
        ],
        'contact_info.contact_id_doc_copy_back': [
          { required: true, message: '请上传超级管理员证件反面照片', trigger: 'change' },
        ],
        'contact_info.contact_period_begin': [
          { required: true, message: '请选择证件有效期开始时间', trigger: 'change' },
        ],
        'contact_info.contact_period_end': [{ required: true, message: '请选择证件有效期结束时间', trigger: 'change' }],
      },
      form: {
        // 经营信息
        business_info: {
          merchant_shortname: '', // 商户简称
          service_phone: '', // 客服电话
        },

        // 结算账户
        bank_account_info: {
          bank_account_type: '', // 账户类型
          account_name: '', // 开户名称
          account_bank: '', // 开户银行
          bank_name: '', // 开户银行全称（含支行）
          code_list: [],
          address_list: [],
          account_number: '',
        },
        
        settlement_info: {
            qualification_type: '',
            activities_id: '',
            qualifications: [],
        },

        // 超级管理员
        contact_info: {
          contact_name: '', // 超管姓名
          contact_id_number: '', // 超管证件号码
          mobile_phone: '', // 手机号码
          contact_email: '', // 联系邮箱
          contact_type: 'LEGAL', // 超级管理员类型

          // 以下经办人类型
          business_authorization_letter: '',
          contact_id_doc_type: '',
          contact_id_doc_copy: '',
          contact_id_doc_copy_back: '',
          contact_period_begin: '',
          contact_period_end: '',
        },

        // 主体信息
        subject_info: {
          subject_type: 'SUBJECT_TYPE_INDIVIDUAL', // 主体类型
          business_license_info: {
            license_copy: '', // 营业执照照片
            license_number: '', // 注册号
            merchant_name: '', // 商户名称
            legal_person: '', // 经营者姓名
            period_begin: '', // 营业执照开始时间
            period_end: '', // 营业执照结束时间
            is_long: 0,
          },
          organization_info: {
            is_composite: 0,
            organization_copy: '',
            organization_code: '',
            org_period_begin: '',
            org_period_end: '',
            is_long: 0,
          },
          certificate_info: {
            // 登记证书
            is_long: 0, // 证件是否长期 0.短期 1.长期 长期不显示结束日期
            cert_copy: '', // 登记证书照片
            cert_type: '', // 登记证书类型
            cert_number: '', // 证书号
            merchant_name: '', // 商户名称
            company_address: '', // 注册地址
            legal_person: '', // 法人姓名
            period_begin: '', // 组织机构代码证有效期开始日期
            period_end: '', // 组织机构代码证有效期结束日期
          },
          identity_info: {
            // 经营者/法人身份证件
            is_long: 0,
            id_doc_type: 'IDENTIFICATION_TYPE_IDCARD',
            id_card_info: {
              id_card_copy: '',
              id_card_national: '',
              id_card_name: '',
              id_card_number: '',
              id_card_address: '',
              card_period_begin: '',
              card_period_end: '',
            },
            id_doc_info: {
              id_doc_copy: '',
              id_doc_name: '',
              id_doc_number: '',
              doc_period_begin: '',
              doc_period_end: '',
            },
          },
        },
      },
      queryTime: [],
    }
  },
  watch: {
    form: {
      handler(e) {
        if (e.subject_info.business_license_info.is_long === 1) {
          this.form.subject_info.business_license_info.period_end = '2999-12-31'
          this.queryTime.period_end = '2999-12-31'
        } else {
          this.form.subject_info.business_license_info.period_end = ''
          this.queryTime.period_end = ''
        }
        console.log(e, e.subject_info.business_license_info.is_long, e.subject_info.business_license_info.period_end)
        if (
          e.subject_info.business_license_info.period_end === '2999-12-31' ||
          this.queryTime.period_end === '2999-12-31'
        ) {
          this.form.subject_info.business_license_info.is_long = 1
        } else {
          this.form.subject_info.business_license_info.is_long = 0
        }
        this.$forceUpdate()
      },
      deep: true,
    },
  },
  computed: {
    getSubjectTypeInfo() {
      let { subject_type } = this.form.subject_info
      return this.subjectTypeList.find((el) => el.id === subject_type).des
    },
  },

  methods: {
    changeTimeYingye(e) {
      if (this.form.subject_info.business_license_info.is_long) {
        this.queryTime = [this.$moment().format('YYYY-MM-DD'), '2999-12-31']
      } else {
        this.queryTime = []
      }
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.form.subject_info.business_license_info.period_begin = e[0]
        this.form.subject_info.business_license_info.period_end = e[1]
      } else {
        this.form.subject_info.business_license_info.period_begin = ''
        this.form.subject_info.business_license_info.period_end = ''
      }
    },
    onOk(url, type, side = undefined) {
      if (type === 1) {
        this.form.subject_info.business_license_info.license_copy = url
      } else {
        if (side === 'face') {
          this.form.subject_info.identity_info.id_card_info.id_card_copy = url
        } else {
          this.form.subject_info.identity_info.id_card_info.id_card_national = url
        }
      }

      this.ocr({
        url,
        type,
        side,
      }).then((data) => {
        if (type === 1) {
          // 营业执照信息
          let {
            reg_num: license_number,
            name: merchant_name,
            person: legal_person,
            establish_date,
            valid_period,
          } = data
          this.form.subject_info.business_license_info.license_number = license_number
          this.form.subject_info.business_license_info.merchant_name = merchant_name
          this.form.subject_info.business_license_info.legal_person = legal_person

          this.form.subject_info.business_license_info.period_begin = establish_date
          this.form.subject_info.business_license_info.period_end = valid_period

          this.queryTime = [establish_date, valid_period]
        } else {
          // 身份证
          if (side === 'face') {
            let { num: id_card_number, name: id_card_name, address: address } = data
            this.form.subject_info.identity_info.id_card_info.id_card_name = id_card_name
            this.form.subject_info.identity_info.id_card_info.id_card_number = id_card_number
            this.form.subject_info.identity_info.id_card_info.id_card_address = address
          } else {
            let { end_date: card_period_end, start_date: card_period_begin } = data
            this.form.subject_info.identity_info.id_card_info.card_period_begin = card_period_begin
            this.form.subject_info.identity_info.id_card_info.card_period_end = card_period_end
          }
        }
      })
    },

    ocr(data) {
      return new Promise((resolve) => {
        ocr(data).then((res) => {
          if (res.code === 0) {
            resolve(res.data)
            return
          }

          this.$message.error(res.msg)
        })
      })
    },

    onChange(e) {
      let province = this.addressList.find((el) => el.adcode === e[0]),
        city = province.children.find((el) => el.adcode === e[1]),
        district = city.children.find((el) => el.adcode === e[2])
      this.form.bank_account_info.address_list = [province.name, city.name, district.name]
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let merchant_info = JSON.parse(JSON.stringify(this.form)),
            { $moment, id } = this,
            reg = 'YYYY-MM-DD'

          if (merchant_info.subject_info.certificate_info.period_begin) {
            merchant_info.subject_info.certificate_info.period_begin = $moment(
              merchant_info.subject_info.certificate_info.period_begin
            ).format(reg)
          }
          if (merchant_info.subject_info.certificate_info.period_end) {
            merchant_info.subject_info.certificate_info.period_end = $moment(
              merchant_info.subject_info.certificate_info.period_end
            ).format(reg)
          }

          if (merchant_info.subject_info.identity_info.id_card_info.card_period_begin) {
            merchant_info.subject_info.identity_info.id_card_info.card_period_begin = $moment(
              merchant_info.subject_info.identity_info.id_card_info.card_period_begin
            ).format(reg)
          }
          if (merchant_info.subject_info.identity_info.id_card_info.card_period_end) {
            merchant_info.subject_info.identity_info.id_card_info.card_period_end = $moment(
              merchant_info.subject_info.identity_info.id_card_info.card_period_end
            ).format(reg)
          }

          if (merchant_info.subject_info.identity_info.id_doc_info.doc_period_begin) {
            merchant_info.subject_info.identity_info.id_doc_info.doc_period_begin = $moment(
              merchant_info.subject_info.identity_info.id_doc_info.doc_period_begin
            ).format(reg)
          }
          if (merchant_info.subject_info.identity_info.id_doc_info.doc_period_end) {
            merchant_info.subject_info.identity_info.id_doc_info.doc_period_end = $moment(
              merchant_info.subject_info.identity_info.id_doc_info.doc_period_end
            ).format(reg)
          }

          if (merchant_info.subject_info.organization_info.org_period_begin) {
            merchant_info.subject_info.organization_info.org_period_begin = $moment(
              merchant_info.subject_info.organization_info.org_period_begin
            ).format(reg)
          }
          if (merchant_info.subject_info.organization_info.org_period_end) {
            merchant_info.subject_info.organization_info.org_period_end = $moment(
              merchant_info.subject_info.organization_info.org_period_end
            ).format(reg)
          }

          if (this.queryTime.length) {
            merchant_info.subject_info.business_license_info.period_begin = this.queryTime[0]
            merchant_info.subject_info.business_license_info.period_end = this.queryTime[1]
          }

          this.btnDisabled = true
          const hide = this.$message.loading('正在提交请稍等～', 0)

          if (merchant_info.contact_info.contact_type === 'LEGAL') {
            delete merchant_info.contact_info.business_authorization_letter
            delete merchant_info.contact_info.contact_id_doc_type
            delete merchant_info.contact_info.contact_id_doc_copy
            delete merchant_info.contact_info.contact_id_doc_copy_back
            delete merchant_info.contact_info.contact_period_begin
            delete merchant_info.contact_info.contact_period_end
          }
          setMerchantInfo({ merchant_info, id })
            .then((res) => {
              this.btnDisabled = false
              hide()
              if (res.code === 0) {
                this.$router.go(-1)
                this.$message.success(res.msg)
                return
              }

              this.$message.error(res.msg)
            })
            .catch(() => {
              hide()
              this.btnDisabled = false
            })
        } else {
          return false
        }
      })
    },

    resetForm() {
      this.$refs.ruleForm.resetFields()
    },

    see(previewImage) {
      this.previewImage = previewImage
      this.$refs.ModalImg.previewVisible = true
    },

    next() {
      this.activeTab = String(parseInt(this.activeTab) + 1)
    },
    delPic(e) {
      this.form.settlement_info.qualifications.splice(e.index, 1)
    },
    selectPic(e) {
      this.form.settlement_info.qualifications = this.form.settlement_info.qualifications ? this.form.settlement_info.qualifications : [],
      e.data.forEach((ele) => {
        if(this.form.settlement_info.qualifications.length >= 5){
          this.$message.error('最多上传5张图片')
          return;
        }
        this.form.settlement_info.qualifications.push(ele)
      })
    },
  },

  mounted() {
    getCountry().then((res) => {
      if (res.code === 0) {
        this.addressList = res.data[0].children
        return
      }

      this.$message.error(res.msg)
    })

    let { query } = this.$route

    if (query.id) {
      this.status = query.type === '2' ? 0 : 1
      this.id = query.id

      getMerchantInfo({
        id: query.id,
      }).then((res) => {
        if (res.code === 0) {
          let { contact_info, subject_info, business_info, bank_account_info, settlement_info } = res.data

          if (!contact_info.contact_type) {
            contact_info = {
              ...contact_info,
              contact_type: 'LEGAL',
              business_authorization_letter: '',
              contact_id_doc_type: '',
              contact_id_doc_copy: '',
              contact_id_doc_copy_back: '',
              contact_period_begin: '',
              contact_period_end: '',
            }
          }
          settlement_info = {...this.form.settlement_info, ...settlement_info}

          this.form = {
            contact_info,
            subject_info,
            business_info,
            bank_account_info,
            settlement_info
          }

          let { period_begin, period_end } = subject_info.business_license_info
          this.queryTime = [period_begin, period_end]

          return
        }

        this.$message.error(res.msg)
      })
    }
  },

  created() {
    var id = this.$route.query.id ? this.$route.query.id : 0
    this.id = id
  },
}
</script>

<style lang="less" scoped>
.subTitle {
  padding-top: 17px;
  margin-bottom: 10px;
  font-size: 20px;
  font-family: PingFangSC-Medium;
  line-height: 28px;
}

.form {
  width: 700px;
}

.header {
  width: 100%;
  background: #fff;
  padding: 17px 32px 0 32px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.ts {
  padding-top: 5px;
  color: #999;
  font-size: 12px;
  line-height: 20px;
}

.formBox {
  padding-left: 5px;
}

.pofBtn {
  text-align: right;
}

.seeImg {
  width: 200px;
  height: 200px;
  cursor: pointer;
}
</style>
